<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>

<head>
    <meta charset="UTF-8">
    <title>寄存固件</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <style>
        .popup-result .text {
            text-align: center;
            line-height: 1.7;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="app-page">
        <div class="app-page-header">
            <div class="page-title">
                <div class="title">寄存固件
                    <span th:text="${firmWareName}" style="font-size: 15px"></span>
                    <span style="font-size: 15px">版本号：</span>
                    <span th:text="${firmWareVersionCode}" style="font-size: 15px"></span>
                </div>
                <div class="filter-group">
                    <a class="z-btn z-default" th:href="@{/firmWare/listByPage}">返回</a>
                </div>
            </div>
        </div>

        <div class="app-page-content">
            <div class="app-card z-mab">
                <div class="app-card-body">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <input value="${deviceUpgradeId}" type="hidden" id="deviceUpgradeId" name="deviceUpgradeId"/>
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">版本号</div>
                                    <div class="body">
                                        <select name="hardVersion" id="hardVersion">
                                            <option value="">---请选择---</option>
                                            <option th:each="versionCode:${versionCodeList}"
                                                    th:value="${versionCode}"
                                                    th:text="${versionCode}"
                                                    th:selected="(${versionCode} == ${hardVersion})">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">在线状态</div>
                                    <div class="body">
                                        <select name="deviceStatus">
                                            <option value="">---请选择---</option>
                                            <option th:each="dsm: ${deviceStatusMap}"
                                                    th:value="${dsm.key}"
                                                    th:text="${dsm.value}"
                                                    th:selected="(${dsm.key} == ${deviceStatus})">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">机型</div>
                                    <div class="body">
                                        <select name="deviceModel">
                                            <option value="">---请选择---</option>
                                            <option th:each="deviceMode: ${deviceModelList}"
                                                    th:value="${deviceMode.deviceModel}"
                                                    th:text="${deviceMode.deviceModel}"
                                                    th:selected="(${deviceMode.deviceModel} == ${deviceModel})">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">分组</div>
                                    <div class="body">
                                        <select name="groupCode">
                                            <option value="">---请选择---</option>
                                            <option th:each="deviceGroup:${deviceGroupList}"
                                                    th:value="${deviceGroup.groupCode}"
                                                    th:text="${deviceGroup.groupName}"
                                                    th:selected="(${deviceGroup.groupCode} == ${groupCode})">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">选择省份</div>
                                    <div class="body">
                                        <select name="province" class="select-province" data-rule="required" data-name="省份">
                                        <option value="">选择所在省份</option>
                                    </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">选择城市</div>
                                    <div class="body">
                                        <select name="city" class="select-city" data-rule="required" data-name="市区">
                                        <option value="">选择所在市区</option>
                                    </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">选择区县</div>
                                    <div class="body">
                                        <select name="area" class="select-district" data-rule="required" data-name="区县">
                                            <option value="">选择所在区县</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="filter-group">
                            <button class="z-btn z-primary">查询</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="app-card">
                <div class="app-card-body">
                    <div class="app-list-total z-mab">
                        <span>总计：<i th:text="${total}"></i></span>
                        <span>在线：<i th:text="${onlineCount}"></i></span>
                        <span>离线：<i th:text="${offlineCount}"></i></span>
                    </div>
                    <div class="z-btn-group z-mab">
                        <a class="batch-upgrade z-btn z-primary">寄存</a>
                    </div>
                    <table class="z-table">
                        <thead>
                            <th>
                                <input type="checkbox" class="input j-checkbox-all">
                            </th>
                            <th>设备名称</th>
                            <th>设备IP</th>
                            <th>设备mac</th>
                            <th>在线状态</th>
                            <th>省</th>
                            <th>市</th>
                            <th>区</th>
                            <th>所属分组</th>
                            <th>机型</th>
                            <th>固件版本</th>
                        </thead>
                        <tbody th:each="resultList : ${resultList}">
                            <tr th:attr="data-id=${resultList.deviceInfoId},data-firmware_upgrade_id=${resultList.firmwareUpgradeId}">
                                <td>
                                    <input type="checkbox" class="input j-checkbox">
                                </td>
                                <td><span th:text="${resultList.deviceNum}"></span></td>
                                <td><span th:text="${resultList.deviceIp}"></span></td>
                                <td><span th:text="${resultList.deviceMac}"></span></td>
                                <td>
                                    <span th:if="${resultList.deviceStatus} eq '0'"><i class="fa fa-check" style="color: #18da18;"></i></span>
                                    <span th:if="${resultList.deviceStatus} eq '1'"><i class="fa fa-close" ></i></span>
                                </td>
                                <td><span th:text="${resultList.deviceProvince}"></span></td>
                                <td><span th:text="${resultList.deviceCity}"></span></td>
                                <td><span th:text="${resultList.deviceCounty}"></span></td>
                                <td><span th:text="${resultList.groupName}"></span></td>
                                <td><span th:text="${resultList.deviceModel}"></span></td>
                                <td><span th:text="${resultList.deviceHardVer}"></span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 分页信息 -->
                <div class="app-card-body">
                    <!-- 前端分页 -->
                    <div class="pagination z-pat z-fr"></div>
                </div>
            </div>
        </div>
    </div>


    <!-- 更新结果 -->
    <div class="popup-result popup-default z-popup z-fixed z-df z-flex-cc z-hide">
        <div class="bg" data-popup-close></div>
        <section class="result section z-hide">
            <div class="title">寄存完成</div>
            <div class="content">
                <div class="text">
                    <p>寄存完成！成功<span class="fail-success">0</span>，失败<span class="fail-count">100</span>！</p>
                </div>
                <div class="z-btn-group">
                    <a class="z-btn z-primary" data-popup-close>确定</a>
                </div>
            </div>
        </section>
    </div>

    <script th:src="@{/lib/jquery.min.js}"></script>
    <script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
    <script th:src="@{/js/form.js}"></script>
    <script th:src="@{/js/popup.js}"></script>
    <script th:src="@{/js/admin/app.js}"></script>
    <script th:src="@{/js/pagination.js}"></script>
    <script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
    <script th:src="@{/lib/flatpickr/zh.js}"></script>
    <script th:src="@{/js/address-0.0.3.js}"></script>
    <script th:inline="javascript">
        //获取context path
        var context = $("meta[name='ctx']").attr("content") || '';
        // 获取参数错误信息
        var errorCode = [[${errorCode}]];
        if(errorCode != 0) {
            var errorMsg = '[[${errorMsg}]]';
            alert(errorMsg);
            window.location.href = context + "/firmWare/listByPage";
        }

        var pageNum =  [[${pageNum}]];
        var pageSize = [[${pageSize}]];
        var total = [[${total}]];
        // 获取固件Id
        var deviceUpgradeId = [[${deviceUpgradeId}]];
        // 获取固件版本号
        var hardVersion = $("[name='hardVersion']").val();
        // 获取在线状态 0.在线; 1.离线
        var deviceStatus = $("[name='deviceStatus']").val();
        // 获取机型
        var deviceModel = $("[name='deviceModel']").val();
        // 获取分组编码
        var groupCode = $("[name='groupCode']").val();
        // // 获取省市区
        // var province = $("select[name='province']").val();
        // var city = $("select[name='city']").val();
        // var area = $("select[name='area']").val();
        var province =  [[${province}]];
        var city = [[${city}]];
        var area = [[${area}]];
        console.log("province : " + province + ",city : " + city + ",area : " +area);

        // 从URL加载搜索数据
        $(".filter").formLoad(App.query);

        // 省市区
        $(".filter").address({
            provinceText: '---请选择---',
            cityText: '---请选择---',
            districtText: '---请选择---',
            apiUrl: 'http://xc-dmp.37226.com/api/area',

            // 默认值
            defaultProvince: province,
            defaultCity: city,
            defaultDistrict: area,
        });

        //分页
        var pagination = new Pagination(".pagination", {
            pageIndex: pageNum, // 当前页数
            pageSize: pageSize, // 每页数量
            count: total, // 总条数
            maxButtonCount: 5, // 分页按钮数量(可选)
            // 分页切换事件
            onPageChanged: function(pageIndex) {
                var url = context + "/firmWare/updateFirmWareForward";
                var paramStr = createParamStr(pageIndex, pageSize);
                if(paramStr !== ""){
                    paramStr = paramStr.substring(1);
                    url = url + "?" + paramStr;
                }
                window.location.href = url;
                // window.location.href = context + "/firmWare/updateFirmWareForward?pageNum=" + pageIndex +
                //     "&pageSize=" + pageSize + "&deviceUpgradeId=" + deviceUpgradeId + "&hardVersion=" + hardVersion +
                //     "&deviceStatus=" + deviceStatus + "&deviceModel=" + deviceModel + "&groupCode=" + groupCode + "&province=" + province + "&city=" + city + "&area=" + area;
            }
        })

        /**
         * 创建参数字符串
         * @param pageIndex 当前页
         * @param pageSize 每页条数
         * @returns {string} 参数字符串
         */
        function createParamStr(pageIndex, pageSize) {
            var url = "";
            if(!isBlank(pageIndex)){
                url = url + "&pageNum=" + pageIndex;
            }
            if(!isBlank(pageSize)){
                url = url + "&pageSize=" + pageSize;
            }
            if(!isBlank(deviceUpgradeId)){
                url = url + "&deviceUpgradeId=" + deviceUpgradeId;
            }
            if(!isBlank(hardVersion)){
                url = url + "&hardVersion=" + hardVersion;
            }
            if(!isBlank(deviceStatus)){
                url = url + "&deviceStatus=" + deviceStatus;
            }
            if(!isBlank(deviceModel)){
                url = url + "&deviceModel=" + deviceModel;
            }
            if(!isBlank(groupCode)){
                url = url + "&groupCode=" + groupCode;
            }
            if(!isBlank(province)){
                url = url + "&province=" + province;
            }
            if(!isBlank(city)){
                url = url + "&city=" + city;
            }
            if(!isBlank(area)){
                url = url + "&area=" + area;
            }
            return url;
        }

        //检查参数
        function isBlank(param) {
            if(undefined === param){
                return true;
            }
            if(null == param){
                return true;
            }
            if("" === param){
                return true;
            }
            return false;
        }

        // 获取表格中选择的ID
        function getSelecteId() {
            let temp = [];
            $('tbody [type="checkbox"]').each(function(index, element) {
                if (element.checked == true) {
                    temp.push($(this).parents('tr,.tr').data('id'));
                }
            })

            return temp.join(',');
        }

        // 寄存
        $('.batch-upgrade').click(function(params) {
            var id = getSelecteId();
            var firmWareName = '[[${firmWareName}]]';
            var firmWareVersionCode = '[[${firmWareVersionCode}]]';
            if (id != '') {
                // 验证重复
                $.ajax({
                    type: "post",
                    url: context + "/firmWare/checkRepeat",
                    data: {
                        deviceInfoIds : id,
                        deviceUpgradeId : deviceUpgradeId,
                        firmWareName : firmWareName,
                        firmWareVersionCode : firmWareVersionCode
                    },
                    success : function(result) {
                        var code = result.code;
                        if(code == 0) {
                            // 继续寄存终端
                            // 可寄存固件的终端
                            var unRepeatDeviceIds = result.data;
                            var msg = result.msg;
                            if(confirm(msg)){
                                $.ajax({
                                    type: "POST",
                                    url: context + "/firmWare/updateFirmWare",
                                    data: {
                                        deviceInfoIds: unRepeatDeviceIds,
                                        deviceUpgradeId :deviceUpgradeId
                                    },
                                    success: function (obj) {
                                        var code = obj.code;
                                        if (code == 0) {
                                            alert(obj.msg);
                                            window.location.href = context + "/firmWare/listByPage";
                                        } else {
                                            alert(obj.msg);
                                            window.location.href = context + "/firmWare/updateFirmWareForward?pageNum=" + pageNum +
                                                "&pageSize=" + pageSize + "&deviceUpgradeId=" + deviceUpgradeId + "&hardVersion=" + hardVersion +
                                                "&deviceStatus=" + deviceStatus + "&deviceModel=" + deviceModel + "&groupCode=" + groupCode;
                                        }
                                    }
                                })
                            }
                        }else {
                            // 没有可以寄存的终端
                            alert(result.msg);
                            window.location.href = context + "/firmWare/updateFirmWareForward?pageNum=" + pageNum +
                                            "&pageSize=" + pageSize + "&deviceUpgradeId=" + deviceUpgradeId + "&hardVersion=" + hardVersion +
                                            "&deviceStatus=" + deviceStatus + "&deviceModel=" + deviceModel + "&groupCode=" + groupCode;
                        }
                    }
                })



            } else {
                popup.tipsTop("请选择需要寄存的数据", 'warning');
            }
        })

        // 返回到固件列表
        $('.batch-goBack').click(function (params) {
            window.location.href = context + "/firmWare/listByPage";
        })
    </script>
</body>

</html>